To be able to edit code and run cells, you need to run the notebook yourself. Where would you like to run the notebook?

This notebook takes about 20 seconds to run.

In the cloud (experimental)

Binder is a free, open source service that runs scientific notebooks in the cloud! It will take a while, usually 2-7 minutes to get a session.

On your computer

(Recommended if you want to store your changes.)

  1. Copy the notebook URL:
  2. Run Pluto

    (Also see: How to install Julia and Pluto)

  3. Paste URL in the Open box

Frontmatter

If you are publishing this notebook on the web, you can set the parameters below to provide HTML metadata. This is useful for search engines and social media.

Author 1
👀 Reading hidden code
127 μs
👀 Reading hidden code
using HypertextLiteral
: @htl, @htl_str

4.0 ms
👀 Reading hidden code
using JSON
60.7 ms
1:100
👀 Reading hidden code
x = 1:100
12.1 μs
👀 Reading hidden code
y = sqrt.(x)
36.8 ms
👀 Reading hidden code
@htl("""
<script src="https://cdn.jsdelivr.net/npm/d3@6.2.0/dist/d3.min.js"></script>

<script id="hello">

const setup = this == null
const svg = setup ? DOM.svg(600,200) : this
const s = setup ? d3.select(svg).append("g"): this.s
if(setup) {
s.append("g").classed("axes",true)
s.append("g").classed("graph",true)
}
const height = 200
const width = 600
const margin = ({top: 20, right: 30, bottom: 30, left: 40})
const on_setup = () => {
}
const on_update = () => {
}
const raw_x = $(JSON.json(x))
const raw_y = $(JSON.json(y))
const x = d3.scaleLinear()
.domain(d3.extent(raw_x))
.range([margin.left, width - margin.right])
224 ms

👀 Reading hidden code
67.3 μs

👀 Reading hidden code
65.6 μs

👀 Reading hidden code
66.4 μs
dot_positions = [100, 400]
👀 Reading hidden code
13.9 μs
@htl("""
<script src="https://cdn.jsdelivr.net/npm/d3@6.2.0/dist/d3.min.js"></script>

<script id="hello">

const positions = $(JSON.json(dot_positions))
const svg = this == null ? DOM.svg(600,200) : this
const s = this == null ? d3.select(svg) : this.s

s.selectAll("circle")
.data(positions)
.join("circle")
.transition()
.duration(300)
.attr("cx", d => d)
.attr("cy", 100)
.attr("r", 10)
.attr("fill", "gray")


const output = svg
output.s = s
return output
</script>

""")
👀 Reading hidden code
512 ms